<template>
	<view class="container">
		<statusBar bgColor="rgba(0,0,0,0)"></statusBar>
    <view class="search">
      <input type="text" placeholder="请输入搜索内容">
      <image src="../../static/fashionPurchase/brand.svg"/>
      <image src="../../static/fashionPurchase/like.svg" @click="toCollect" />
    </view>
    <view class="bg">
      <view class="bg-color">
        <image src="../../static/fashionPurchase/bg-red.svg"/>
        <view>
          <view class="bg-title">品牌馆</view>
          <view class="bg-bottom">
            <view class="item">
              <image src="../../static/fashionPurchase/brand.svg"/>
              <text>路易威登</text>
            </view>
            <view class="item">
              <image src="../../static/fashionPurchase/brand.svg"/>
              <text>古驰</text>
            </view>
            <view class="item">
              <image src="../../static/fashionPurchase/brand.svg"/>
              <text>迪奥</text>
            </view>
            <view class="item">
              <image src="../../static/fashionPurchase/brand.svg"/>
              <text>路易威登</text>
            </view>
          </view>
        </view>
      </view>
      <view class="bg-color">
        <image src="../../static/fashionPurchase/bg-blue.svg"/>
        <view>
          <view class="bg-title">潮豆兑换</view>
          <view class="bg-bottom bg-bottom-right">
            <image src="../../static/fashionPurchase/placeholder.svg" />
            <image src="" />
            <view class="bg-num">1000潮豆</view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
  import {
    onLoad,
    onShow
  } from "@dcloudio/uni-app";

  //跳转心愿单
  const toCollect = () => {
    uni.navigateTo({
      url: '/pages/collect/index'
    })
  }
	
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background-color: #F4F3F7;
    position: relative;
    z-index: -2;

    .search{
      width: 690rpx;
      height: 88rpx;
      margin: auto;
      @include flex(row,space-between);

      input{
        width: 514rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 36rpx;
        line-height: 72rpx;
        padding-left: 30rpx;
        box-sizing: border-box;
      }
      image{
        width: 44rpx;
        height: 44rpx;
      }
    }
    
    .bg{
      width: 690rpx;
      height: 368rpx;
      margin: auto;
      padding-top: 32rpx;
      @include flex(row,space-between);

      .bg-color{
        width: 336rpx;
        height: 368rpx;
        position: relative;

        >image{
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        >view{
          width: 100%;
          height: 100%;
          .bg-title{
            height: 78rpx;
            line-height: 78rpx;
            padding-left: 20rpx;
          }

          .bg-bottom{
            width: 315rpx;
            height: 280rpx;
            margin: auto;
            background: #FFFFFF;
            border-radius: 8rpx;
            padding: 16rpx 0;
            box-sizing: border-box;
            position: relative;
            @include flex(row,space-between,flex-start,wrap);

            .item{
              width: 105rpx;
              height: 116rpx;
              // background-color: pink;
              @include flex(column,space-between,center,wrap);

              >image{
                width: 72rpx;
                height: 72rpx;
                border: 2rpx solid #FE475B;
                border-radius: 36rpx;
              }
              >text{
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #333333;
              }
            }

            >image:nth-of-type(1){
              width: 100%;
              height: 100%;
            }
            >image:nth-of-type(2){
              position: absolute;
              top: 10rpx;
              left: 50rpx;
              z-index: 5;
            }
            >.bg-num{
              font-weight: 500;
              font-size: 24rpx;
              color: #333333;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }

          .bg-bottom-right{
            padding: 0;
          }
        }
      }
    }
  }
</style>
